<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="titleBox">
      <!-- icon-dingdan -->
      <div class="iconfontcolor icon-dingdan"></div>
      <div class="infoBox">
        <div class="info_line1">
          <h3 class="tit">{{ contractInfo.contractNumber }}</h3>
          <div class="tag" v-if="contractInfo.contractType.value === 1">
            合同执行中
          </div>
          <div class="tag" v-if="contractInfo.contractType.value === 2">
            合同已到期
          </div>
        </div>
        <div class="info_line2">
          <div style="margin-right: 15px">
            创建时间：{{ contractInfo.createTime }}
          </div>
        </div>
      </div>
      <div class="feeGroup">
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">合同期限</div>
            <div class="price">
              {{
                contractInfo.contractPeriod + contractInfo.contractPeriodUnit
              }}
            </div>
          </div>
          <div style="
              margin: 0 0 0 30px;
              padding: 0;
              width: 2px;
              height: 64px;
              background-color: #f0f0f0;
            "></div>
        </div>
      </div>
      <button class="examineBtn" @click="getDetail(contractId), showAddDialog()">
        <i class="iconfont icon-tianjiaxuqian"></i>
        <span>续签</span>
      </button>
    </div>
    <div class="main_item">
      <titleVue :title="'合同信息'"></titleVue>

      <el-descriptions class="descriptionsInfo" :column="3"
        :labelStyle="{ color: '#939393', fontSize: '12px', fontWeight: 'bold', marginRight: '20px', textAlign: 'right', alignment: 'right' }"
        :contentStyle="{ color: '#262626', fontSize: '12px' }">
        <el-descriptions-item label="合同类型">承运合同</el-descriptions-item>
        <el-descriptions-item label="货主">{{ contractInfo.cargoName }}</el-descriptions-item>
        <!-- <el-descriptions-item label="合同名称">{{ contractInfo.contractName }}</el-descriptions-item> -->
        <el-descriptions-item label="项目名称">{{ contractInfo.projectName }}</el-descriptions-item>
        <el-descriptions-item label="计费标准">{{
          contractInfo.charging + contractInfo.chargingUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="结算账期">{{
          contractInfo.settlementPeriod + contractInfo.settlementPeriodUnit
        }}</el-descriptions-item>
        <el-descriptions-item label="合同开始日期">{{ contractInfo.contractStartTime || '--.--' }}</el-descriptions-item>
        <el-descriptions-item label="发票类型">{{ contractInfo.invoiceTypeStr }}</el-descriptions-item>
        <el-descriptions-item label="发票税率">{{ contractInfo.taxRate + '%' || "无" }}</el-descriptions-item>
        <el-descriptions-item label="保证金" :span="3">{{ contractInfo.earnestMoney || '0' }}元</el-descriptions-item>
        <el-descriptions-item label="合同结束日期 ">
          <div>{{ contractInfo.contractEndTime || '--.--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="合同附件">
          <div class="contractfile">
            <i class="iconfontcolor icon-lianjie" style="font-size: 12px; padding-right: 8px"></i>
            <span style="color: #189aff" @click="showFile">附件.{{
              contractInfo.signImage.split(".")[
              contractInfo.signImage.split(".").length - 1
              ]
            }}</span>
          </div>


        </el-descriptions-item>
        <el-descriptions-item label="合同备注">{{
          contractInfo.contractRemarks || '无'
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 编辑（复用新增）合同弹窗 -->
    <el-dialog class="dialog" title="续签合同" :visible.sync="visibleEditBox" width="840px">
      <el-form ref="addContractForm" :model="addContractForm" :rules="addContractRules" label-width="110px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="货主" prop="cargoOwnerName">
              <el-select v-model="addContractForm.cargoOwnerName" filterable remote reserve-keyword loading-text="正在搜索中"
                @change="changeName" style="width: 100%" placeholder="请选择内容" :remote-method="remoteSearch"
                :loading="loading">
                <el-option v-for="item in cargoOwnerNameArr" :key="item.index" :label="item.name"
                  :value="item.ownerId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber">
              <el-input v-model="addContractForm.contractNum" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="addContractForm.projectName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="合同名称" prop="contractName">
              <el-input
                v-model="addContractForm.contractName"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="计费标准" prop="charging">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.charging" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.chargingUnit"
                  :placeholder="addContractForm.chargingUnit">
                  <el-option v-for="item in WeightArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算账期" prop="settlementPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.settle" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.settleUnit"
                  :placeholder="addContractForm.settleUnit">
                  <el-option v-for="item in timeArr" :key="item.value" :label="item.label"
                    :value="item.label"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票类型" prop="invoiceType">
              <el-select v-model="addContractForm.invoiceType" style="width: 100%" placeholder="请选择内容">
                <el-option v-for="item in invoiceArr" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票税率" prop="taxRate">
              <el-input v-model="addContractForm.invoiceRatio" class="append_unit" placeholder="请输入内容">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  %
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractPeriod">
              <el-col :span="18">
                <el-input class="inputSelect_left" v-model="addContractForm.period" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="6">
                <el-select class="inputSelect_right" v-model="addContractForm.periodUnit"
                  :placeholder="addContractForm.periodUnit">
                  <el-option v-for="item in termArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金" prop="earnestMoney">
              <el-input v-model="addContractForm.earnestMoney" class="append_unit">
                <div slot="suffix" style="
                    padding-right: 10px;
                    padding-left: 10px;
                    line-height: 32px;
                  ">
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同开始日期" prop="contractStartTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.startDate" type="date" placeholder="选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" prop="contractEndTime">
              <el-date-picker style="width: 100%" v-model="addContractForm.endDate" type="date" placeholder="选择日期"
                class="data_picker" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同附件" prop="signImage">
              <el-upload class="upload" :action="url" :on-preview="handlePreview" ref="uploadRef"
                :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :file-list="fileList"
                :on-exceed="handleExceed" :on-success="uploadFileSuccess" :headers="headers" :auto-upload="true">
                <el-button size="small" class="uploadBtn" type="primary">上传文件</el-button>
                <span slot="tip" class="el-upload__tip">支持PDF、JPG等格式</span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合同备注" prop="contractRemarks" class="notes" placeholder="请输入内容">
              <el-input v-model="addContractForm.remark" resize="none" :rows="3" type="textarea" maxlength="200"
                show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="visibleEditBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="cofime()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue.vue";
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";

export default {
  data() {
    return {
      visibleEditBox: false,
      activeName: "first",
      contractId: this.$route.params.contractId,
      //合同详情
      contractInfo: {
        createBy: "",
        createTime: "",
        updateBy: "",
        updateTime: "",
        remark: "",
        contractId: "",
        contractingPartyId: "",
        contractingPartyType: "",
        contractType: {},
        contractNumber: "",
        projectName: "",
        // contractName: "",
        charging: "",
        chargingUnit: "",
        settlementPeriod: "",
        settlementPeriodUnit: "",
        invoiceType: "",
        taxRate: "",
        contractPeriod: "",
        contractPeriodUnit: "",
        earnestMoney: "",
        contractStartTime: "",
        contractEndTime: "",
        contractRemarks: "",
        signImage: "",
        supplierCargoContractId: "",
        isDel: "",
        cargoName: "",
      },
      //表单数据
      addContractForm: {
        cargoId: "",
        cargoOwnerName: "",
        contractId: "", //可选项，有该项则表示新增
        contractNum: "",
        projectName: "", //对应货主合同名称
        // contractName: "",
        charging: "",
        chargingUnit: "",
        settle: "",
        settleUnit: "",
        invoiceType: "",
        invoiceRatio: "",
        period: "",
        periodUnit: "",
        earnestMoney: "",
        startDate: "",
        endDate: "",
        fileUrls: "ssssssss",
        remark: "",
      },
      //数据校验规则
      addContractRules: {
        cargoOwnerName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        contractNum: [{ required: true, message: "不能为空", trigger: "blur" }],
        projectName: [{ required: true, message: "不能为空", trigger: "blur" }],
        // contractName: [
        //   { required: true, message: "不能为空", trigger: "blur" },
        // ],
        charging: [{ required: true, message: "不能为空", trigger: "blur" }],
        settle: [{ required: true, message: "不能为空", trigger: "blur" }],
        period: [{ required: true, message: "不能为空", trigger: "blur" }],
        periodUnit: [{ required: true, message: "不能为空", trigger: "blur" }],
        startDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        endDate: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceType: [{ required: true, message: "不能为空", trigger: "blur" }],
        invoiceRatio: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        earnestMoney: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",
      WeightArr: [
        // 计费标准选项
        { value: "吨", label: "吨" },
        { value: "千克", label: "千克" },
      ],
      WeightValue: "吨",
      timeArr: [
        // 结算周期选项
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      timeValue: "月",
      invoiceArr: [
        // 发票类型选择
        { value: 0, label: "无需开票" },
        { value: 1, label: "电子发票" },
        { value: 2, label: "增值税专用发票" },
        { value: 3, label: "普通发票" },
      ],
      invoiceValue: "年",
      termArr: [
        // 合同期限 选择
        { value: "月", label: "月" },
        { value: "年", label: "年" },
      ],
      termValue: "年",
      loading: false,
      names: [], //获取的全部货主名称列表
      cargoOwnerNameArr: [
        //匹配的货主名称列表
        // { index: 1, ownerId: "1", name: "唐洪飞" },
        // { index: 2, ownerId: "2", name: "周杰伦" },
      ],
      fileList: [],
    };
  },
  methods: {
    //在新链接打开文件
    showFile() {
      // window.location.href=this.contractInfo.signImage
      window.open(this.contractInfo.signImage);
    },
    handleClick() { },
    //回填表单数据
    getDetail(id) {
      // console.log("contractId=" + id)
      let v = this;
      let tmp = {
        contractId: id,
      };
      httpApi.contractManagementApi
        .getCargoOwnerContractDetails(tmp)
        .then(function (rsp) {
          let dat = rsp.data.data;
          // // console.log("货主合同信息获取完毕")
          v.addContractForm.cargoId = dat.contractingPartyId + "";
          v.addContractForm.cargoOwnerName = dat.cargoName;
          v.addContractForm.contractId = id + "";
          v.addContractForm.contractNum = dat.contractNumber;
          v.addContractForm.projectName = dat.projectName;
          v.addContractForm.contractName = dat.contractName;
          v.addContractForm.charging = dat.charging;
          v.addContractForm.chargingUnit = dat.chargingUnit;
          v.addContractForm.settle = dat.settlementPeriod;
          v.addContractForm.settleUnit = dat.settlementPeriodUnit;
          v.addContractForm.invoiceType = v.invoiceArr[dat.invoiceType].value;
          v.addContractForm.invoiceRatio = dat.taxRate;
          v.addContractForm.period = dat.contractPeriod;
          v.addContractForm.periodUnit = dat.contractPeriodUnit;
          v.addContractForm.earnestMoney = dat.earnestMoney;
          v.addContractForm.startDate = dat.contractStartTime;
          v.addContractForm.endDate = dat.contractEndTime;
          v.addContractForm.fileUrls = dat.signImage;
          v.addContractForm.remark = dat.contractRemarks;
          //更改文件名列表
          let tmp = {
            name: dat.signImage.split("/")[dat.signImage.split("/").length - 1],
            url: dat.signImage,
          };
          v.fileList.length = 0;
          v.fileList.push(tmp);
          // console.log(v.addContractForm)
          //如果是新增，则跳过货主名赋值
          if (
            v.addContractForm.cargoId == null ||
            v.addContractForm.cargoId == undefined ||
            v.addContractForm.cargoId == ""
          )
            return;
          // // console.log("搜索指定的货主姓名")
          for (let item of v.names) {
            if (item.id == v.addContractForm.cargoId) {
              v.addContractForm.cargoOwnerName = item.name;
              // console.log("已找到货主名称")
              return;
            }
          }
          // console.log("未找到指定货主的名称")
        });
    },
    // 编辑弹窗
    showAddDialog() {
      //显示窗口
      this.visibleEditBox = true;
      //清空全部表单属性
      for (let item in this.addContractForm) {
        this.addContractForm[item] = "";
      }
      //重设表单单位属性
      this.addContractForm.chargingUnit = this.WeightArr[0].value;
      this.addContractForm.periodUnit = this.timeArr[0].value;
      this.addContractForm.settleUnit = this.timeArr[0].value;
      //延迟执行；清空上传文件列表
      this.$nextTick(function () {
        this.$refs.uploadRef.clearFiles();
      });
      let v = this;
      //组装请求参数
      let params = {
        like: "",
        size: 200,
      };
      //请求货主名称列表
      httpApi.contractManagementApi.cargoNames(params).then(function (rsp) {
        // console.log("rsp=", rsp)
        v.names = JSON.parse(JSON.stringify(rsp.data.data));
        v.cargoOwnerNameArr = rsp.data.data;
        //剔除没有name的数据
        for (let i = 0; i < v.cargoOwnerNameArr.length; i++) {
          // // console.log("v.cargoCNameOps[i]="+JSON.stringify(v.cargoCNameOps[i]))
          if (
            v.cargoOwnerNameArr[i].name == null ||
            v.cargoOwnerNameArr[i].name == ""
          ) {
            // console.log("被移除的数据=" + JSON.stringify(v.cargoOwnerNameArr[i]))
            v.$delete(v.cargoOwnerNameArr, i);
            i--;
          }
          v.cargoOwnerNameArr[i].index = i;
        }
        // console.log("货主姓名列表获取完毕=", v.cargoOwnerNameArr)
      });
    },
    //更换货主名称
    changeName(id) {
      // console.log("选中项的ID=" + id)
      this.addContractForm.cargoId = id;
    },
    //搜索名称列表
    remoteSearch(query) {
      this.cargoOwnerNameArr = [];
      this.loading = true;
      for (let item of this.names) {
        // // console.log(JSON.stringify(item))
        //有的数据不完整，部分字段为空，因此必须判空
        if (
          item == null ||
          item == undefined ||
          item.name == null ||
          item.name == undefined
        )
          continue;
        if (item.name.indexOf(query) != -1) {
          this.cargoOwnerNameArr.push(item);
        }
      }
      this.loading = false;
      // console.log(JSON.stringify(this.cargoOwnerNameArr))
    },
    //移除文件提示
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    //文件预览提示
    handlePreview(file) {
      // console.log(file, 3333);
    },
    //限制文件多选提示
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    //文件移除提示
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //文件上传成功响应
    uploadFileSuccess(response, file, fileList) {
      this.addContractForm.fileUrls = response.data.url;
      this.fileList.length = 0;
      this.fileList.push(response.data);
      // console.log("this.files=", this.fileList)
    },
    //提交表单
    cofime() {
      // this.addContractForm.fileUrls = "ssssss"
      let v = this;
      // console.log("addContractForm=" + JSON.stringify(this.addContractForm))
      httpApi.contractManagementApi
        .editCargoContractInfo(this.addContractForm)
        .then(function (rsp) {
          // console.log(JSON.stringify(rsp.data))
          if (rsp.data.code == 200) {
            v.$message.success("操作成功");
            //刷新详情
            v.showDetail();
          }
        });
      this.visibleEditBox = false;
    },
    //取得详情数据
    showDetail() {
      let args = {
        contractId: this.contractId,
      };
      let v = this;
      //取得详情数据
      httpApi.contractManagementApi
        .getCargoOwnerContractDetails(args)
        .then(function (rsp) {
          // // console.log(rsp)
          if (rsp.data.code == 200) {
            v.contractInfo = rsp.data.data;
            // console.log("获取详情数据成功=", v.contractInfo)
          } else {
            // console.log("详情数据获取失败，错误信息=", rsp.data)
          }
        });
    },
  },
  mounted() {
    // console.log("contractId=" + this.contractId)
    this.showDetail();
    // let args={
    //     "contractId":this.contractId
    // }
    // let v=this
    // //取得详情数据
    // httpApi.contractManagementApi.getCargoOwnerContractDetails(args).then(function (rsp) {
    //     // // console.log(rsp)
    //     if(rsp.data.code==200){
    //         v.contractInfo=rsp.data.data
    //         // console.log("获取详情数据成功=",v.contractInfo)
    //     }else{
    //         // console.log("详情数据获取失败，错误信息=",rsp.data)
    //     }
    // })
  },
  components: {
    breadcrumb,
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  flex: 1;
  background-color: #fff;
  height: 119px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 9px;

  .feeGroup {
    margin-left: auto;
    display: flex;
    width: 139px;

    .feeBox {
      display: flex;
      align-items: center;

      .intervalLine {
        width: 2px;
        height: 64px;
        background-color: #f0f0f0;
        margin-right: 20px;
      }

      .feeItem {
        display: flex;
        flex-direction: column;

        .tit {
          color: #a3a3a3;
          font-size: 12px;
          margin-bottom: 14px;
        }

        .price {
          color: #262626;
          font-size: 18px;
          font-weight: Bold;
        }
      }
    }
  }

  .icon-dingdan {
    font-size: 43px;
    margin-right: 10px;
  }

  .infoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .info_line1 {
      margin-bottom: 3px;
      display: flex;
      align-items: center;

      >.tit {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 8px;
        color: #262626;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 84px;
        height: 20px;
        color: #1890ff;
        font-size: 12px;
        text-align: center;
        line-height: 20px;

        &.gery {
          color: #a8b0b6;
          background-color: #a8b0b6;
        }
      }
    }

    .info_line2 {
      display: flex;
      color: #939393;
      font-size: 12px;
    }
  }

  .examineBtn {
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    width: 80px;
    height: 36px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }

    .icon-tianjiaxuqian {
      font-size: 15px;
      margin-right: 6px;
      color: #ffffff;
    }
  }
}

.main_item {
  padding: 36px 30px;
  background-color: #fff;
  min-height: calc(100vh - 255px);

  .contractfile {
    color: #1890ff;
    display: flex;
    align-items: center;
    cursor: pointer;

    .icon-lianjie {
      font-size: 12px;
    }

    .fileName {
      font-size: 12px;
      margin-left: 3px;
    }
  }
}

.label_right {
  text-align: right;
  alignment: right;
  margin-right: 0;
  width: 100px;
  padding-left: 100px;
}

// 标题
::v-deep .el-dialog__header {
  border-bottom: 1px solid #f0f0f0;
  padding: 19px 20px 17px;
  color: #262626;
  font-size: 14px;
  font-weight: bold;
}

//关闭图标
::v-deep .el-dialog__headerbtn .el-dialog__close {
  font-size: 15px;
}

::v-deep .el-dialog__body {
  padding: 25px 40px 24px;
}

//   表格
::v-deep .el-form-item__label {
  line-height: 32px;
  font-size: 12px;
  color: #262626;
  padding-top: 4px;
}

::v-deep .el-input__inner {
  line-height: 32px;
  height: 32px;
  padding: 0 10px;
}

.data_picker {
  ::v-deep .el-input__inner {
    padding-left: 30px;
    width: 100%;
  }

  ::v-deep .el-input__prefix {
    //display: none;
  }
}

// 上传文件
.upload {
  .uploadBtn {
    width: 80px;
    height: 32px;
    background-color: #fff;
    color: #000;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    border-color: #ddd;
    transition: 0.2s;
    margin-right: 12px;
    margin-bottom: 8px;

    &:hover {
      opacity: 0.8;
      background-color: #ccc;
    }
  }

  .el-upload__tip {
    color: #cccccc;
    font-size: 12px;
  }

  ::v-deep .el-upload-list {
    background-color: #eef3f9;
  }

  ::v-deep .el-upload-list__item-name {
    padding: 7px 4px;
    color: #409eff;
    font-size: 12px;
    transition: 0.2s;

    &:hover {
      opacity: 0.8;
    }
  }

  ::v-deep .el-icon-document:before {
    color: #409eff;
    font-size: 16px;
  }

  ::v-deep .el-upload-list__item .el-icon-close {
    top: 50%;
    transform: translateY(-50%);
  }
}

.cancelBtn {
  width: 80px;
  height: 36px;
  border: 1px solid #d9d9d9;
  color: #262626;
  font-size: 12px;
  border-radius: 4px;
  background-color: #fff;
}

.submitBtn {
  background-color: #1890ff;
  width: 80px;
  height: 36px;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
}

.inputSelect_left {
  height: 32px;

  ::v-deep .el-input__inner {
    border-radius: 4px 0px 0px 4px;
  }
}

.inputSelect_right {
  height: 32px;

  ::v-deep .el-input__inner {
    border-radius: 0px 4px 4px 0px;
    border-left: none;
    background-color: #f5f7fa;
    font-size: 12px;
    color: #606266;
  }
}

::v-deep .el-input__icon {
  line-height: 0;
}

::v-deep .el-form-item__content {
  line-height: 0;
}

.notes ::v-deep .el-textarea .el-input__count {
  bottom: 15px;
  color: #c0c4cc;
}
</style>
